// Canvas 从入门到劝朋友放弃（图解版）
// https://zhuanlan.zhihu.com/p/545137269

function onCanvasResize() {
  const mapDivNodes = document.getElementsByClassName('map');
  if (!(mapDivNodes && mapDivNodes.length)) {
    console.warn('onCanvasResize 0 mapDivNodes=null')
    return;
  }

  const mapDiv = mapDivNodes[0];
  const mapLeft = mapDiv.offsetLeft || 0;
  const mapTop = mapDiv.offsetTop|| 0;
  const mapWidth = mapDiv.offsetWidth || 0;
  const mapHeight= mapDiv.offsetHeight || 0;
  const mapCententX = Math.ceil(mapWidth/2)
  // const mapCententY = Math.ceil(mapHeight/2)

  const triangle = document.getElementById('triangle');
  const triangleParent = triangle.parentNode;
  if (!(triangleParent)) {
    console.warn('onCanvasResize 1 triangleParent=null')
    return;
  }

  const tpLeft = triangleParent.offsetLeft || 0;
  const tpTop = triangleParent.offsetTop || 0;
  const tpWidth = triangleParent.offsetWidth || 0;
  const tpHeight = triangleParent.offsetHeight || 0;
  console.log('mapTop=', mapTop)
  console.log('tpTop=', tpTop)
  console.log('tpHeight=', tpHeight)

  const ctx = triangle.getContext("2d");
  // 清除画布
  ctx.clearRect = (0,0,triangle.width,triangle.height);

  let status = 'cener';
  let spaceX = 0;
  let spaceY = mapTop - tpTop;
  triangle.height = spaceY;

  // 初始化 canvas 的 width / height
  if (tpLeft + tpWidth <= mapCententX + mapLeft) {
    // 最左侧
    status = 'left';
    spaceX = mapLeft + mapCententX - tpLeft;

    triangle.width = spaceX;
    triangle.style.left = '0px';
  } else if (tpLeft >= mapCententX + mapLeft) {
    // 最右侧
    status = 'right';

    spaceX = mapLeft + mapCententX - tpLeft;

    triangle.style.left = spaceX + 'px';
    spaceX = Math.abs(spaceX);
    triangle.width = tpWidth + spaceX;
  } else {
    spaceX = Math.abs(mapLeft + mapCententX - tpLeft);
    triangle.width = tpWidth;
    triangle.style.left = '0px';
  }

  console.log('spaceX=', spaceX)
  console.log('spaceY=', spaceY)

  // 绘制
  ctx.beginPath()
  if (status == 'left'){
    ctx.moveTo(tpWidth, 0);
    ctx.lineTo(spaceX, spaceY);
    ctx.lineTo(0, tpHeight);
  } else if (status == 'right') {
    ctx.moveTo(spaceX, 0);
    ctx.lineTo(0, spaceY);
    ctx.lineTo(tpWidth + spaceX, tpHeight);
  } else {
    ctx.moveTo(0, tpHeight);
    ctx.lineTo(spaceX, spaceY);
    ctx.lineTo(tpWidth, tpHeight);
  }

  if (status == 'left') {
    ctx.moveTo(tpWidth, tpHeight);
    ctx.lineTo(spaceX, spaceY);
  } else if (status == 'right'){
    ctx.moveTo(Math.abs(spaceX), tpHeight);
    ctx.lineTo(0, spaceY);
  }

  // 区域
  const grd1 = ctx.createLinearGradient(0, 0, triangle.width, triangle.height); // 渐变方向-Y轴
  grd1.addColorStop(0, '#CECECE'); //起始颜色
  grd1.addColorStop(1, 'white'); //终点颜色
  ctx.fillStyle = grd1; //以上面定义的渐变填充
  ctx.fill(); //闭合形状并且以填充方式绘制出来

  // --- line 填充
  ctx.lineWidth = '0.1'; //设置线条宽度
  ctx.strokeStyle = 'CECECE';
  // ctx.lineCap='rouand'; // 显示圆形
   // 修改直线两端样式
  ctx.lineCap = 'butt'; // 显示方形
  ctx.stroke();
  ctx.globalAlpha = 0.6; // 设置图像透明度为0.2
}

export function onSetTimeOut() {
  setTimeout(() => {
    onCanvasResize()
  }, 8);
}

const main = document.getElementById('main')
const df = document.getElementById('divfloat')
df.addEventListener('mousedown', onMouseDown, true)

function onMouseDown(e1) {
  const disx = e1.clientX - df.offsetLeft
  const disy = e1.clientY - df.offsetTop

  document.onmousemove = (e2) => {
    df.style.left = e2.clientX - disx + 'px'
    df.style.top = e2.clientY - disy + 'px'

    // 具体移动范围。
    // const rect = df.getBoundingClientRect()
    const rect = main.getBoundingClientRect()
    console.log('rect=', JSON.stringify(rect))

    onSetTimeOut()
  }

  document.onmouseup = () => {
    document.onmousemove = null
    document.onmouseup = null
    return false
  }
}

main.addEventListener('click', () => {
  console.log('main-click')
}, true)